<template>
  <el-form
    label-position="top"
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
    style="width: 90%"
    status-icon
  >
    <el-form-item label="账号" prop="username">
      <el-input v-model="ruleForm.username" />
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="ruleForm.password" type="password" />
    </el-form-item>
    <el-form-item label="确认密码" prop="checkPass">
      <el-input v-model="ruleForm.checkPass" type="password" />
    </el-form-item>
    <el-form-item label="用户类型" prop="type">
      <el-select v-model="ruleForm.type" placeholder="管理员">
        <el-option label="管理员" value="1" />
        <el-option label="编辑" value="-1" />
      </el-select>
    </el-form-item>
    <el-form-item label="个人简介">
      <el-input v-model="ruleForm.textarea" type="textarea" />
    </el-form-item>
    <el-form-item label="上传头像" prop="name">
      <el-upload
        ref="upload"
        class="avatar-uploader"
        limit="1"
        list-type="picture-card"
        :auto-upload="false"
        :on-change="onchange"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
      </el-upload>
    </el-form-item>
    <el-form-item>
      <el-button @click="addUser" type="primary"> 确认 </el-button>
    </el-form-item>
  </el-form>
</template>
  
  <script lang="ts" setup>
import { Useradd } from "@/request/home/userapi.js";
import { reactive, ref } from "vue";
import type { FormInstance, FormRules, UploadProps } from "element-plus";
import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";

const imageUrl = ref("");
const upload = ref();
const onchange = (rawFile) => {
  if (rawFile.raw.type !== "image/jpeg") {
    ElMessage.error("图片必须是JPG类型");
    console.log(upload.value.clearFiles());
  } else if (rawFile.raw.size / 1024 / 1024 > 2) {
    ElMessage.error("图片大小超过2MB");
    console.log(upload.value.clearFiles());
  } else ruleForm.file = rawFile.raw;
};

interface RuleForm {
  username: string;
  password: string;
  checkPass: string;
  textarea: string;
  type: string;
  file: File;
}

const validatePass = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入密码"));
  } else {
    if (ruleForm.checkPass !== "") {
      if (!ruleFormRef.value) return;
      ruleFormRef.value.validateField("checkPass", () => null);
    }
    callback();
  }
};
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请再输入一次密码"));
  } else if (value !== ruleForm.password) {
    callback(new Error("两个密码不一样"));
  } else {
    callback();
  }
};

const formSize = ref("default");

const ruleFormRef = ref();
const ruleForm = reactive<RuleForm>({
  username: "",
  password: "",
  checkPass: "",
  textarea: "",
  type: "",
  file: null,
});

const rules = reactive<FormRules<RuleForm>>({
  username: [{ required: true, message: "请输入账号", trigger: "blur" }],
  password: [{ required: true, validator: validatePass, trigger: "blur" }],
  checkPass: [{ required: true, validator: validatePass2, trigger: "blur" }],
  type: [
    {
      required: true,
      message: "请选择用户类型",
    },
  ],
});

const addUser = () => {
  ruleFormRef.value.validate(async (test) => {
    if (test) {
      const params = new FormData();
      params.append("username", ruleForm.username);
      params.append("password", ruleForm.password);
      params.append("checkPass", ruleForm.checkPass);
      params.append("textarea", ruleForm.textarea);
      params.append("type", ruleForm.type);
      params.append("file", ruleForm.file);

      const result = await Useradd(params);
      console.log(result);

      if (result.data.code === 400)
        ElMessage({
          message: result.data.msg,
          type: "error",
        });
      else
        ElMessage({
          message: result.data.msg,
          type: "success",
        });
    }
  });
};
</script>
  
  <style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
  
  <style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>